<html><head><meta charset="utf-8"><title>17 使用显式复制断言给TS一个你一定会赋值的承诺-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 3-4 17 使用显式复制断言给TS一个你一定会赋值的承诺
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                17 使用显式复制断言给TS一个你一定会赋值的承诺
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-24 17:58:39
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img4.mukewang.com/5d0b5f6c0001e83806400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">人不可有傲气，但不可无傲骨。<p class="author">——徐悲鸿</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在讲解本小节的主要内容之前，我们先来补充两个关于null和undefined的知识点：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(1) 严格模式下null和undefined赋值给其它类型值</strong></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当我们在 tsconfig.json 中将 strictNullChecks 设为 true 后，就不能再将 undefined 和 null 赋值给除它们自身和void 之外的任意类型值了，但有时我们确实需要给一个其它类型的值设置初始值为空，然后再进行赋值，这时我们可以自己使用联合类型来实现 null 或 undefined 赋值给其它类型：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">"lison"</span><span class="token punctuation">;</span>
str <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">// error 不能将类型“null”分配给类型“string”</span>
<span class="token keyword">let</span> strNull<span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">=</span> <span class="token string">"lison"</span><span class="token punctuation">;</span> <span class="token comment">// 这里你可以简单理解为，string | null即表示既可以是string类型也可以是null类型</span>
strNull <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">// right</span>
strNull <span class="token operator">=</span> undefined<span class="token punctuation">;</span> <span class="token comment">// error 不能将类型“undefined”分配给类型“string | null”</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">注意，TS 会将 undefined 和 null 区别对待，这和 JS 的本意也是一致的，所以在 TS 中，<code>string|undefined</code>、<code>string|null</code>和<code>string|undefined|null</code>是三种不同的类型。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>(2) 可选参数和可选属性</strong></p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">如果开启了 strictNullChecks，可选参数会被自动加上<code>|undefined</code>，来看例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">,</span> y<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> <span class="token punctuation">(</span>y <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> undefined<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error Argument of type 'null' is not assignable to parameter of type 'number | undefined'</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可以根据错误信息看出，这里的参数 y 作为可选参数，它的类型就不仅是 number 类型了，它可以是 undefined，所以它的类型是联合类型<code>number | undefined</code>。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">TS 对可选属性和对可选参数的处理一样，可选属性的类型也会被自动加上<code>|undefined</code>。</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">PositionInterface</span> <span class="token punctuation">{</span>
  x<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  b<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> position<span class="token punctuation">:</span> PositionInterface <span class="token operator">=</span> <span class="token punctuation">{</span>
  x<span class="token punctuation">:</span> <span class="token number">12</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
position<span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token string">"abc"</span><span class="token punctuation">;</span> <span class="token comment">// error</span>
position<span class="token punctuation">.</span>b <span class="token operator">=</span> undefined<span class="token punctuation">;</span> <span class="token comment">// right</span>
position<span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">// error</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="显式赋值断言">3.4.1 显式赋值断言</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接下来我们来看显式赋值断言。当我们开启 strictNullChecks 时，有些情况下编译器是无法在我们声明一些变量前知道一个值是否是 null 的，所以我们需要使用类型断言手动指明该值不为 null。这可能不好理解，接下来我们就来看一个编译器无法推断出一个值是否是null的例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">getSplicedStr</span><span class="token punctuation">(</span>num<span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">getRes</span><span class="token punctuation">(</span>prefix<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 这里在函数getSplicedStr里定义一个函数getRes，我们最后调用getSplicedStr返回的值实际是getRes运行后的返回值</span>
    <span class="token keyword">return</span> prefix <span class="token operator">+</span> num<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 这里使用参数num，num的类型为number或null，在运行前编译器是无法知道在运行时num参数的实际类型的，所以这里会报错，因为num参数可能为null</span>
  <span class="token punctuation">}</span>
  num <span class="token operator">=</span> num <span class="token operator">||</span> <span class="token number">0.1</span><span class="token punctuation">;</span> <span class="token comment">// 但是这里进行了赋值，如果num为null则会将0.1赋给num，所以实际调用getRes的时候，getRes里的num拿到的始终不为null</span>
  <span class="token keyword">return</span> <span class="token function">getRes</span><span class="token punctuation">(</span><span class="token string">"lison"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这个例子中，因为有嵌套函数，而编译器无法去除嵌套函数的 null（除非是立即调用的函数表达式），所以我们需要使用显式赋值断言，写法就是在不为 null 的值后面加个<code>!</code>。来看上面的例子该怎么改：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">getSplicedStr</span><span class="token punctuation">(</span>num<span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">getLength</span><span class="token punctuation">(</span>prefix<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> prefix <span class="token operator">+</span> num<span class="token operator">!</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  num <span class="token operator">=</span> num <span class="token operator">||</span> <span class="token number">0.1</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token function">getLength</span><span class="token punctuation">(</span><span class="token string">"lison"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这样编译器就知道了，num 不为 null，即便 getSplicedStr 函数在调用的时候传进来的参数是null，在 getLength函数中的 num 也不会是 null。</p>
</div><div class="cl-preview-section"><h3 id="本节小结">本节小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们补充学习了两个关于null和undefined的知识点。一个是如何在严格模式，也就是在tsconfig.json中将strictNullChecks设为true的情况下，将null或undefined赋值给除它们自身和void之外的类型的值；另一个知识点是当将strictNullChecks设为true后，编译器对可选参数和可选属性类型定义的处理，效果相当于在我们指定的类型后面加上<code>|undefined</code>。最后我们学习了如何使用<strong>显式赋值断言</strong>，它的作用就是告诉编译器某个值确实不为null，这个我们在实际开发中常会用到，我们在实战章节中用到时会再次学习。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们将学习类型别名和字面量类型。类型别名我们在前面简单接触过，它的语法类似赋值语句，只不过赋的不是具体的值，而是一个类型；字面量类型我们称它为单一的类型，它包含数字字面量类型和字符串字面量类型两种，下个小节我们来进行详细学习。<br>
<img src="http://img.mukewang.com/5d0343240001943716000230.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d0343240001943716000230.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/353">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    16 使用类型保护让TS更聪明
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/355">
                                                    <div class="next r clearfix">
                                <p>
                                    18 类型别名和字面量类型—单调的类型
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">1</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <ul class="comments-list js-comments-list">                                                        <li class="comment clearfix">                                          <a href="//www.imooc.com/u/3709449/articles" target="_blank">                             <div class="head-img l" style="background-image:url(//img4.mukewang.com/5bbe867e0001ab6d05000311-100-100.jpg)"></div>                         </a>                         <div class="comment-detail l">                             <div class="hoverDisplay">                                 <div class="com-author clearfix">                                                                                                               <a href="//www.imooc.com/u/3709449/articles" target="_blank">                                         <div class="name l">斯芬克斯01</div>                                     </a>                                                                                                                                                                                              </div>                                 <div class="com-content">                                     一个是如何在严格模式，也就是在tsconfig.json中将strictNullChecks设为true的情况下，将null或undefined赋值给除它们自身和void之外的类型的 (剩下的全部的) 值  是不是更容易理解???或者更通顺?                                 </div>                                 <div class="com-other clearfix">                                                                              <!-- 没点过赞 -->                                         <div class="btn-agree js-agree l" data-commentid="674">                                                                                  <i class="imv2-thumb_up"></i>                                             <span>0</span>                                         </div>                                                                                                               <div class="btn-reply l js-reply" data-replyid="674">回复</div>                                     <!-- 没登录不显示举报 -->                                                                              <div class="btn-report l js-tip-off comment-report" data-id="674" data-uid="3709449" data-src="/read/35/article/354" data-type="15">举报</div>                                                                          <div class="time r">2019-07-01</div>                                 </div>                             </div>                                                                                   </div>                     </li>                              </ul>                           </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>